<template>
	<view class="center">
		<view class="data-view">
			<view class="data-font">
				<mp-html :tag-style="tag_style" :content="wxSet.public_step" :container-style="container_style" />
			</view>
		</view>
	</view>
</template>

<script>
	// 获取应用实例
	const app = getApp()
	import mpHtml from '@/components/mp-html/mp-html';
	export default {
		components: {
			mpHtml
		},
		data() {
			return {
				// 基本配置
				wxSet: [],
				// 文本框解析
				tag_style: {
					h1: 'border-top:1px solid rgb(0 0 141 / 12%);margin:48px 0 16px;padding-top:24px;letter-spacing:-.02em;line-height:32px',
					h2: 'border-top:1px solid rgb(0 0 141 / 12%);margin:48px 0 16px;padding-top:24px;letter-spacing:-.02em;line-height:32px',
					h3: 'border-top:1px solid rgb(0 0 141 / 12%);margin:48px 0 16px;padding-top:24px;letter-spacing:-.02em;line-height:32px',
					h4: 'lborder-top:1px solid rgb(0 0 141 / 12%);margin:48px 0 16px;padding-top:24px;letter-spacing:-.02em;line-height:32px',
				},
				container_style: 'font-size:15px;overflow-x: hidden;line-height:30px;letter-spacing:1px',
			}
		},
		onLoad() {
			if (app.globalData.wxSet == '') {
				//（解决异步）
				app.on('wxSet', this.changeToken.bind(this));
			} else {
				this.wxSet = app.globalData.wxSet;
			}
			
			// 微信分享盆友圈
			//#ifdef MP-WEIXIN
			wx.showShareMenu({
				withShareTicket: true,
				menus: ['shareAppMessage', 'shareTimeline']
			})
			//#endif
			
			
		},
		
		// 分享好友配置
		onShareAppMessage(res) {
			if (res.from === 'button') { // 来自页面内分享按钮
				console.log(res.target)
			}
			return {
				title: this.wxSet.share_title,
				imageUrl: this.wxSet.share_title_url,
				path: 'pages/step/step'
			}
		},
		
		methods: {
			//（解决异步）
			changeToken() {
				this.wxSet = app.globalData.wxSet;
			},
		}
	}
</script>

<style>
	/* 内容 */
	.data-view {
		margin: 48rpx 0rpx;
		font-size: 28rpx;
		line-height: 60rpx;
		background-color: #FFFFFF;
		border-radius: 20rpx;
		padding: 20rpx 30rpx;
	}
	/* 标语 */
	.data-ad-Reading {
		font-size: 24rpx;
		color: #8d9090;
		margin-top: 10rpx;
	}
	
	/* 标题 */
	.ma-top{
		margin-top: 60rpx;
	}
	.data-h {
		font-size: 36rpx;
		position: relative;
		
	}
	
	/* 顶部图片 */
	.about-w{
		height: 320rpx;
		width: 100%;
		position: relative;
		border-radius: 20rpx;
		overflow: hidden;
		box-shadow: #dcdcdc 2rpx 6rpx 12rpx; 
	}
	
	
	/* 全局 */
	.center {
		margin: 28rpx;
	}
	.fengrui-img {
		height: 100%;
		width: 100%;
	}
	page {
		background-color: #F7F7F7;
	}
	
	/* 暗黑模式下应用的样式 */
	@media (prefers-color-scheme: dark) {
		page {
			background: #161616;
		}
		.data-view{
			background-color: #202020;
		}
		.author{
			font-size: 20rpx;
			color: #484848;
			text-align: center;
			color: rgba(201, 201, 201, 1);
		}
	}
</style>
